<template>
  <div class="popup">
    <!-- 搜索栏 -->
    <van-search
      v-model="value"
      show-action
      :placeholder="defaultKeyword.keyword"
      @search="onSearch"
      @input="input"
    >
      <template #action>
        <div @click="onCancel">取消</div>
      </template>
    </van-search>
    <!-- 历史记录和热搜话题 -->
    <Historical
      v-if="PopupJump == 1"
      :historyKeywordList="historyKeywordList"
      :hotKeywordList="hotKeywordList"
      @fn="HistoricalClick"
      @fn2="HistoricalremenClick"
    />
    <!-- 搜索列表 -->
    <Search v-else-if="PopupJump == 2" :data="data" @fn="SearchClick" />
    <!-- 产品列表 -->
    <Product
      v-else
      :datas="datas"
      :filterCategory="filterCategory"
      @fn="DropdownOrder"
      @fn1="DropdownFilter"
    />
  </div>
</template>

<script>
import { mapMutations } from "vuex";
import Historical from "@/components/popup/Historical";
import Search from "@/components/popup/Search";
import Product from "@/components/popup/Product";
import { SearchIndex, SearchHelper, GoodsList } from "../request/api";
export default {
  components: {
    Historical,
    Search,
    Product,
  },
  data() {
    return {
      value: "",
      PopupJump: 1,
      // 历史和热搜事件
      defaultKeyword: {},
      historyKeywordList: [],
      hotKeywordList: [],
      data: [],
      // 产品列表数据
      page: 1, //显示页数
      size: [], // 一页显示个数
      order: "", //排列顺序，desc表示价格由高到低，asc表示价格由低到高
      categoryId: "", //类别id，代表下拉菜单中的全部、居家等选项
      sort: "id", //可以是id或price
      keyword: "", //搜索词汇
      datas: [],
      filterCategory: [],
    };
  },
  methods: {
    ...mapMutations({
      onshowzhezhao: "show/onshowzhezhao",
    }),
    // 分类点击事件
    DropdownFilter(e){
      this.categoryId=e
       this.GoodProduct();
    },
    // 价格点击事件
    DropdownOrder(e) {
      this.order = e;
      this.sort = "price";
      this.GoodProduct();
    },
    // 历史记录的点击事件
    HistoricalClick(item) {
      this.PopupJump = 3;
      this.keyword = item;
      this.GoodProduct();
    },
    // 热搜话题的点击事件
    HistoricalremenClick(item) {
      this.PopupJump = 3;
      this.keyword = item;
      this.GoodProduct();
    },
    SearchClick(item) {
      this.PopupJump = 3;
      this.keyword = item;
      this.GoodProduct();
    },
    // 确定时触发 <产品列表>
    onSearch() {
      this.PopupJump = 3;
      this.keyword = this.value;
      this.GoodProduct();
    },
    // 搜索时触发
    input() {
      this.PopupJump = 2;
      SearchHelper({
        keyword: this.value,
      }).then((res) => {
        this.data = res.data;
      });
    },
    // 取消按钮
    onCancel() {
      this.$router.go(-1);
      this.onshowzhezhao(false);
    },

    // 封装 <产品列表> 的请求数据
    GoodProduct() {
      GoodsList({
        keyword: this.keyword,
        page:this.page,
        size:this.size,
        order:this.order,
        categoryId:this.categoryId,
        sort:this.sort
      }).then((res) => {
        let { data, filterCategory } = res.data;
        this.datas = data;
        this.filterCategory = filterCategory.map((item) => {
          return { text: item.name, value: item.id, checked: item.checked };
        });
        /*
        后台拿到的数据长这样
       {id: 0, name: '全部', checked: true}
      {id: 1005001, name: '餐厨', checked: false}
      
        然而我们UI组件的需要的数据长这样
         { text: "全部", value: "a" },
        { text: "好评排序", value: "b" },

        我们需要从把后台的数据封装成和我们UI组件一样的数据
        */
      });
    },
  },
  created() {
    //搜索框 历史和热搜
    SearchIndex().then((res) => {

      let { defaultKeyword, historyKeywordList, hotKeywordList } = res.data;
      this.defaultKeyword = defaultKeyword;
      this.historyKeywordList = historyKeywordList;
      this.hotKeywordList = hotKeywordList;
    });
  },
};
</script>
 
<style lang = "less" scoped>
.popup {
   position:fixed;
  width: 100%;
  height: 100%;
  /* min-height: 100vh; */
  /* position: absolute; */
  top: 0;
  z-index: 99999;
  background-color: #efefef;
}
</style>